<template>
  <div class="back_content_page">
    <div class="header">
      <van-nav-bar
        title="上门回收"
         style="font-weight: bold"
        @click-left="onClickLeft"
      />
    </div>
    <div>

      <van-tabs v-model="active"
                @click="click_first"
                swipeable>
        <van-tab
          v-for="(first,i) in firsts"
          :key="i"

          :title="first.first_name">
          <!--类型-->
          <div>
            <p class="type_xing">
              类型
            </p>
            <div class="btn_content_item_page" >

              <van-button
                round type="default"
                :key="j"
                :class="{'active_c':isActive_sec==j}"
                v-for="(sec,j) in first.secondList"
                @click="click_sec(sec.threeList,j,sec.second_name)"
              >{{sec.second_name}}</van-button>


            </div>
          </div>

          <!--规格-->
          <div style="margin-top: 2vh;">
            <p class="type_xing">规格</p>
            <div class="btn_content_item_page">
              <van-button
                round type="default"
                v-for="(thr,k) in threes"
                :key="k"
                :class="{'active_c':isActive_thr==k}"
                @click="click_thr(thr,k,thr.classification_name)"
              >{{thr.classification_name}}</van-button>
            </div>
          </div>

        </van-tab>
      </van-tabs>

      <!--底部-->
      <div class="footer_content">
        <div class="footer_one">
          <p>预估价格<span>{{min_i}}-{{max_i}}</span>元</p>
          <p style="color: #CCCCCC;font-weight: normal;font-size: 14px;">成交价格以实际评估为准</p>
        </div>
        <div class="footer_two">
          <van-button round type="default" @click="Immediate">加入清单</van-button>
        </div>
      </div>
    </div>





  </div>
</template>
<script>
    export default {
        data() {
            return {
                active: '',
                firsts:[],
                threes:[],
                max_i:'',
                min_i:'',
                three_id:'',
                isActive_sec:0,
                isActive_thr:0,
                second_name:'',
                three_name:''
            };

        },
        mounted:function(){
            this.classification_list();
        },
        methods:{
            click_first(name, title){
                const that = this;
                console.log(1);
                let secs = that.firsts[name].secondList;
                if(secs.length>0){
                    that.threes = secs[0].threeList;
                    console.log(that.threes);
                    if(that.threes.length>0){
                        that.min_i = that.threes[0].min_integral;
                        that.max_i = that.threes[0].max_integral
                        that.three_id = that.threes[0].three_id
                    }
                }

            },
            click_sec(thrs,sec_j,second_name){
                this.threes = thrs;
                this.min_i = thrs[0].min_integral;
                this.max_i = thrs[0].max_integral
                this.three_id = thrs[0].three_id
                this.isActive_sec=sec_j;
                this.second_name= second_name;
                this.three_name= thrs[0].classification_name;
            },
            click_thr(thr,thr_k,thr_name){
                this.min_i = thr.min_integral;
                this.max_i = thr.max_integral
                this.three_id = thr.three_id
                this.isActive_thr = thr_k;
                this.three_name = thr_name;
            },
            Immediate(){
                console.log(this.three_id);
                console.log(this.max_i);
                console.log(this.second_name);
                console.log(this.three_name);
                var json_obj = {"three_id":this.three_id,"three_name":this.three_name,"second_name":this.second_name,"max_i":this.max_i};
                let data = JSON.stringify(json_obj) // result传递的query参数。我们转为string
                this.$emit("get_three_obj",data);
                /*this.$router.push({
                    path:'/Immediate',
                    query:{res:data}
                })*/
            },
            classification_list(){

                const that = this;
                that.$sendRequest('/recycle/classification_list',"").then(function(res){
                    console.log(res.data.result.first);
                    that.firsts= res.data.result.first;
                    console.log(that.firsts);
                    if(that.firsts.length>0){
                        let secs = that.firsts[0].secondList;
                        if(secs.length>0){
                            that.threes = secs[0].threeList;
                            that.second_name= secs[0].second_name;
                            if(that.threes.length>0){
                                that.min_i = that.threes[0].min_integral;
                                that.max_i = that.threes[0].max_integral
                                that.three_id = that.threes[0].three_id
                                that.three_name =  that.threes[0].classification_name;
                            }
                        }
                    }

                })
            },
            onClickLeft(){
                this.$router.back(-1);
            }
        }
    };
</script>
<style scoped="scoped">
	.back_content_page >>> .van-tabs__line{
		background-color: #4C9FFD;
	}
  .back_content_page >>> .van-tabs__content{
    height: 32vh;
    overflow: auto;
  }
  .back_content_page >>> [class*=van-hairline]::after{
    border:0 solid #ffffff;
  }
  .btn_content_item_page >>> .van-button{
    margin-right: 3vw;
    width: 26vw;
    height: 6vh;
  }
  .btn_content_item_page >>> .van-button--normal{
    padding: 1px;
  }
  .active_c{
    background: #4C9FFD;
    color: #ffffff;
  }
  .back_content_page >>> .van-button{
  	line-height: 38px;
  }
  p{
  	
    margin: 0;
    padding: 0;
  }

  .help_content >>> .van-cell__title{
    text-align: left;
    padding-left: 3vh;
  }
  .help_content>>>.van-collapse-item__content{
    text-align: left;
    padding-left: 5.4vh;
  }
  .chan_question{
    margin-top: 1vh;
    text-align: left;
    padding-left: 3vh;
    color: #000;
    font-weight: 600;
    background: #FFFFFF;
    padding: 1vh;
  }
  .back_content_page{
    background: rgb(245,245,245);
  }
  .back_content_page >>> .van-tabs__content{
    background: #fff;
    text-align: left;
    padding: 3vh;
  }
  .type_xing{
    color: #CCCCCC;
    font-size: 14px;
  }
  .back_content_page >>> .van-button{
    margin-bottom: 1vh;
    margin-top: 1vh;
  }
  .footer_content{
    position: fixed;
    width: 100%;
    padding: 1px;
    bottom: 0;
    align-items: center;
    background: #FFFFFF;

    display: flex;
    justify-content: space-around;

  }
  .footer_one p{
    font-size: 15px;
    font-weight: bold;
    color: #000000;
  }
  .footer_one p span{
    color: rgb(255,66,66);
  }
  .footer_content >>> .van-button__text{
    padding: 0 5vh;
  }
  .footer_content >>>.van-button{
    background: #4C9FFD;
    color: #FFFFFF;
  }
</style>

